<template>
  <!-- 在vue页面中，template下第一个标签使用div -->
  <div class="box">
    <div class="login-box">
      <div class="title">澳佳微人事管理系统</div>
      <!--  表单    -->
      <div>
        <el-form label-width="100px" :model="user" style="margin-top: 40px">
          <el-form-item label="账号" size="large">
            <el-input
              v-model="user.username"
              size="large"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="密码" size="large">
            <el-input
              type="password"
              v-model="user.password"
              size="large"
              style="width: 300px"
            />
          </el-form-item>
          <!-- <el-form-item label="验证码" size="large">
            <el-input v-model="user.verify" style="width: 100px;" size="large"/>
            <img :src="url" alt=""  style="height: 38px;margin-left: 10px">
            <span style="margin-left: 10px;cursor: pointer" @click="changeVerify">换一个</span>
          </el-form-item> -->
          <el-button type="success" @click="login" size="large"
            >点击登录</el-button
          >
        </el-form>
        <br />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "Login",
  setup() {
    //创建一个路由
    const router = useRouter();

    const data = reactive({
      user: {},
      url: "http://localhost:8080/createVerify",
    });

    const login = () => {
      axios
        .post("http://localhost:8080/user/checkLogin", data.user)
        .then((res) => {
          console.log(res);
          if (res.data === "") {
            ElMessage.error("账号或密码错误，请重新输入");
          } else {
            ElMessage({
              message: "登录成功",
              type: "success",
            });
            sessionStorage.setItem('user',JSON.stringify(res.data))
            router.push("/layout")
          }
        });

    };

    //验证码切换
    const changeVerify = () => {
      data.url = "http://localhost:8080/createVerify?" + Math.random();
    };

    return { ...toRefs(data), login, changeVerify };
  },
};
</script>

<style scoped>
.box {
  background-color: darkcyan;
  width: 100%;
  height: 100vh; /*自适应高度*/
  /* 通过flex布局进行上下居中 */
  display: flex;
  align-items: center; /* 上下居中 */
  justify-content: center; /* 左右居中 */
  background-image: url("../assets/imgs/bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
.login-box {
  width: 450px;
  height: 350px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 10px;
  /*margin: 0 auto;*/
  text-align: center;
}
.title {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ffffff;
  font-size: 25px;
  line-height: 50px;
  font-weight: bold;
}
*/deep/ .el-form-item__label {
  color: white;
}
</style>